<template>
  <view class="container">
    <HeadNav title="活动详情" back />
    <view class="banner">
      <view class="active-img">
        <image
          class="product-item-img"
          :src="
            detailInfo.coverFileUrl
              ? detailInfo.coverFileUrl
              : '/static/images/active.jpg'
          "
        ></image>
      </view>
      <view class="active-title">
        {{ detailInfo?.activityName }}
      </view>
    </view>
    <view class="content-bar">
      <view class="content-bar-header">
        <text>报名信息</text>
      </view>
      <uni-list>
        <uni-list-item
          title="活动开始时间:"
          :rightText="formatDate(detailInfo.startTime)"
          :show-extra-icon="true"
          :extraIcon="extraIcon"
        />
        <uni-list-item
          title="活动结束时间:"
          :rightText="formatDate(detailInfo.endTime)"
          :show-extra-icon="true"
          :extraIcon="extraIcon"
        />
        <uni-list-item
          title="用户昵称:"
          :rightText="detailInfo?.nikeName"
          :show-extra-icon="true"
          :extraIcon="extraIcon"
        />
        <uni-list-item
          title="用户手机号:"
          :rightText="userStore.user.phone"
          :show-extra-icon="true"
          :extraIcon="extraIcon"
        />
      </uni-list>
      <view class="button-area" v-if="status === '3'">
        <view class="bottom-text"> 活动已结束 </view>
      </view>
      <view class="button-area" v-else>
        <view class="bottom-btn-cancel" @tap="cancelRegister"> 取消报名 </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import HeadNav from '@/components/HeadNav'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { activityDetailApi, cancelSignUpApi } from '@/api/activity'
import { formatDate } from '@/utils/formatTime'
import { useUserStore } from '@/stores'

const extraIcon = reactive({
  color: '#DFDFDF',
  size: '22',
  type: 'forward'
})
let activityId = ''
const detailInfo = ref({})
const status = ref('')
const userStore = useUserStore()

onLoad(options => {
  console.log('options', options)
  activityId = options.id
  status.value = options.stage
  getData()
})

const getData = async () => {
  try {
    uni.showLoading({
      title: '正在加载...'
    })
    // checkActiveSignup(id)
    const res = await activityDetailApi(activityId)
    detailInfo.value = res.data
    uni.hideLoading()
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '查询活动数据失败，请稍后再试',
      icon: 'error'
    })
  }
}

const handelCancel = async () => {
  uni.showLoading({
    title: '正在取消...',
    mask: true
  })
  await cancelSignUpApi(detailInfo.value.id)
  uni.hideLoading()
  uni.showToast({
    icon: 'none',
    title: '已取消报名',
    success: () => {
      uni.navigateBack()
    }
  })
}

const cancelRegister = () => {
  uni.showModal({
    title: '提示',
    content: '确定取消报名吗？',
    success: res => {
      if (res.confirm) {
        handelCancel()
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.banner {
  background-color: #45463a;
  padding: 32rpx;
  display: flex;
  gap: 32rpx;
  height: 230rpx;

  .active-img {
    width: 200rpx;
    height: 200rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 24rpx;
    }
  }

  .active-title {
    color: #fff;
    font-size: 32rpx;
  }
}

.content-bar {
  flex: 1;
  position: relative;
  bottom: 20rpx;

  .content-bar-header {
    border-radius: 30rpx 30rpx 0 0;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #f9f9f9;
    padding-left: 32rpx;
  }

  .button-area {
    position: absolute;
    bottom: calc(40rpx + env(safe-area-inset-bottom));
    width: 100%;
    display: flex;
    justify-content: center;

    .bottom-btn-cancel {
      border-radius: 12rpx;
      border: 2rpx solid #cecece;
      background-color: #e1e1e1;
      // width: 264rpx;
      height: 72rpx;
      // line-height: 72rpx;
      width: 50%;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      background-image: url('https://ucp-tcg.com:18001/mc/app/static/btn-bg1.png');
      background-repeat: no-repeat;
      background-size: contain;
      // font-weight: 600;
    }

    .bottom-text {
      color: #8f939c;
      font-size: 28rpx;
    }
  }
}

::v-deep .uni-list-item {
  .uni-list-item__extra-text {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }
}
</style>
